<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue3.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    <button @click="fn1">父组件按钮1</button>
    <counter @bb="sun_fun"></counter>
  </div>
</template>


<script>
 
  //组件
  const Counter={
    template:`<div>子组件<button @click="s_btn">子组件按钮11</button></div>
    <div>子组件<button @click="handleChange">子组件按钮22</button></div>
    `,
    emits: ['bb'],
    setup(props,context){
      const {inject} =Vue
      let {attrs,emit} =context
      let s_btn=()=>{
        emit('bb')
      }
      const fooName = inject('foo')
      console.log(fooName)
      const changeName = inject('changeName')
      // console.log(changeName)

      const handleChange=()=>{
        changeName("bb")
      }
      return {
        s_btn,
        handleChange
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  setup(){
    const { provide ,ref } =Vue
    let val=ref("测试")
    //子组件的方法
    let sun_fun=()=>{
      alert("我是子组件给的数据")
    }
    provide('foo','234')
    provide('changeName',value=>{
      val.value=value
    })
    let fn1=()=>{
      val="我要改变测额,val没有加ref,所以不能直接改变视图"
      console.log(val)
    }
    return {
      sun_fun,
      val,
      fn1,
      
    }
  },
  components:{Counter},
}



Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>